<template>
  <div class="zd-con">
    <el-form
      :model="formData"
      label-position="left"
      label-width="2rem"
      class="ep-form-inline"
    >
      <el-form-item label="实体类型：">
        <el-autocomplete
          :style="{ width: '3rem' }"
          v-model="formData.entityName"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入"
          @select="handleSelect"
        >
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="是否选择唯一性字段">
        <el-switch
          v-model="formData.isSelect"
          active-text="是"
          inactive-text="否"
        ></el-switch>
      </el-form-item>
      <el-form-item v-if="formData.isSelect" label="字段名">
        <el-select
          :style="{ width: '3rem' }"
          v-model="formData.fields"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in fieldOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="btn-con">
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        @click="deleteEntityComp(id)"
      >
      </el-button>
    </div>
  </div>
</template>
  
<script>
import { getEntityTypes, getEntityTypeFields } from "@/api/tasklist.js";
export default {
  props: ["id", "initialFormData"],
  components: {},
  computed: {},
  data: () => {
    return {
      formData: {
        entityName: "",
        entityType: "",
        isSelect: false,
        fields: "",
      },
      fieldOptions: [],
    };
  },
  watch: {
    id: function (newVal) {
      if (newVal) {
        this.formData = this.initialFormData;
      }
    },
    formData: function (newVal) {
      if (newVal) {
        // console.log("1111");
        this.$emit("formDataChanged", newVal, this.id);
      }
    },
    "formData.isSelect": function (newVal) {
      // debugger;
      if (newVal == true) {
        // 如果选了是,判断实体类型选了吗
        if (this.formData.entityName != "") {
          this.fetchCheckboxOptions();
        } else {
          this.$message({
            message: "请先选择实体类型",
          });
          this.formData.isSelect = false;
        }
      }
    },
    // "formData.entityName": function (newVal) {
    //   debugger;
    //   if (newVal && newVal != "") {
    //     // 如果选了是则调用
    //     this.fetchCheckboxOptions();
    //   } else {
    //     if (newVal == "") {
    //       this.$message({
    //         message: "请先选择实体类型",
    //       });
    //       this.formData.isSelect = false;
    //     }
    //   }
    // },
  },
  mounted() {
    // console.log("22222");
    this.formData = this.initialFormData;
  },
  methods: {
    // 删除自己
    deleteEntityComp(id) {
      this.$emit("deleteEntityComp", id);
    },
    // 获取多选列表
    fetchCheckboxOptions() {
      getEntityTypeFields({
        entityType: this.formData.entityType,
        // entityType: "GLDZ_330421_TDCB",
      })
        .then((res) => {
          const outputList = res.map((item) => {
            return {
              value: item.name,
              label: item.name,
              isSelect: item.isSelect,
            };
          });
          this.fieldOptions = outputList;
        })
        .catch((err) => {});
    },
    querySearchAsync(queryString, cb) {
      getEntityTypes({
        chineseName: queryString,
      })
        .then((res) => {
          // 新增一个 value 字段，值为 chineseName
          const modifiedData = res.map((item) => ({
            ...item, // 保留原有字段
            value: item.chineseName, // 新增 value 字段
          }));
          this.entityTypeList = modifiedData;
          cb(modifiedData);
        })
        .catch((err) => {});
    },
    handleSelect(item) {
      if (item.chineseName == "") {
      } else {
        this.formData.entityName = item.chineseName;
        this.formData.entityType = item.name;
        this.fetchCheckboxOptions();
      }
    },
  },
};
</script>
  
  <style lang="less" scoped>
.zd-con {
  display: flex;
  align-items: center;
  .btn-con {
    margin-left: 0.1rem;
  }
}
</style>
  